<template>
  <div class="root">

    <BannerPro/>

    <Feature/>
    <GraphicDesign/>

    <Advantage/>

    <SimpleProBuy :packages="packages" @login="$parent.$parent.showLogin()"/>

    <Welcome/>

    <Faq/>
    <!-- 为什么选择Simple Pro -->
    <!-- 使用者 -->
    <!-- 最近提问 -->
    <!-- 社区认证用户推荐 -->

  </div>
</template>

<script>
import Welcome from "@/components/simplepro/Welcome";
import BannerPro from "@/components/simplepro/BannerPro";
import Advantage from "@/components/simplepro/Advantage";
import GraphicDesign from "@/components/simplepro/GraphicDesign";
import Feature from "@/components/simplepro/Feature";
import SimpleProBuy from "@/components/simplepro/SimpleProBuy";
import Faq from "@/components/simplepro/Faq";
import api from "@/utils/api";

export default {
  name: "simplepro",
  components: {SimpleProBuy, Feature, GraphicDesign, Advantage, BannerPro, Welcome, Faq},
  layout: "base",
  data() {
    return {
      packages: []
    }
  },
  created() {
    if (process.browser) {
      this.$parent.$parent.$refs.header.fixed = true;
    }
  },
  destroyed() {
    console.log('销毁当前组件');
    if (process.browser) {
      this.$parent.$parent.$refs.header.fixed = false;
    }
  },
  head: {
    title: 'SimplePro官网-专业版Simple UI 前后端分离，功能更多界面更美观！-Simple社区',
    meta: [{
      name: 'description',
      content: 'Simple UI Pro simplepro 是专业版Simple UI 基于vue和element-ui实现前后端分离，功能更多界面更美观！'
    }, {
      name: 'keywords',
      content: 'simpleui、Simple UI、simplepro、simplepro官网、simpleui官网'
    }
    ]
  },
  async asyncData() {
    let packages = await api.getProPackage();
    //给package添加上active属性
    packages.forEach((item, index) => item.active = index === 0);

    return {
      packages
    }
  }
}
</script>

<style scoped lang="less">
.root {
  margin-top: -20px;
}
</style>

